<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <link href="/layui/css/layui.css" media="all" rel="stylesheet">
        </link>
        <style>
        </style>
    </head>
    <body>
        <script src="/layui/layui.js">
        </script>
        <form class="layui-form">
            <table class="layui-table" id="demo" lay-filter="demo">
                <colgroup>
                    <col width="60">
                        <col width="80">
                            <col>
                            </col>
                        </col>
                    </col>
                </colgroup>
                <thead>
                     <tr>
                         <th colspan="2"></th>
                      <th colspan="2" style="text-align: center">KTV</th>
                      <th colspan="3" style="text-align: center">七一碗</th>
                    </tr>
                    <tr>
                        <th>序号</th>
                        <th width="150px">明细科目</th>
                        <th width="150px"><input class="layui-input" style="display:inline, width:20px" type="" name="" value="x月期末余额"></th>
                        <th>备注</th>
                        <th width="150px"><input class="layui-input" style="display:inline, width:20px" type="" name="" value="x月期末余额"></th>
                        <th>备注</th>
                        <th>合计</th>
                    </tr>
                </thead>
                <tbody class="data-tbody">
                    <tr>
                        <td>1</td>
                        <td>
                            <input autocomplete="off" lay-data="purchase_sum" class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input straight_alcohol" lay-verify="number" name="straight_alcohol" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="purchase_sum" class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="reduce_material_sum" class="layui-input reduce_material_sum" lay-verify="number" name="reduce_material_sum" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="purchase_sum" class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="month_of_end_sum" class="layui-input month_of_end_sum" lay-verify="number" name="month_of_end_sum" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            {{csrf_field()}}

<!--             <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit" lay-filter="formDemo" lay-submit="">
                        立即提交
                    </button>
                    <button class="layui-btn layui-btn-primary" type="reset">
                        重置
                    </button>
                </div>
            </div> -->
        </form>
        <button class="layui-btn sub">
            立即提交
        </button>
        <button class="layui-btn add" >添加一行</button>
        <button class="layui-btn reduce" >减少一行</button>
    </body>
</html>
<script>
    //Demo
    layui.use(['form','table'], function () {
        var table = layui.table;
        var form = layui.form;

        //监听提交
        $('.sub').on('click', function() {
            layer.msg('已提交');
            //layer.msg(JSON.stringify(data.field));
            var sum_data = [];
            $('.straight_alcohol').each(function () {
                var values = $(this).val();
                //straight_alcohol.push(values);
            });
            $('.data-tbody').children('tr').each(function () {
                var data = [];
                $(this).children('td:lt(1)').each(function () {
                    var text = $(this).text().replace(/\ +/g,"").replace(/[\r\n]/g,"");
                    data.push(text)
                });
                $(this).children('td:gt(0)').each(function () {
                    var val = $(this).children('input').val();
                    //console.log(val);
                    data.push(val);
                });
                sum_data.push(data);
            });

            var input = $('th').children('input');
            console.log(input);
            var head = ['序号','明细科目', $(input[0]).val(), '备注', $(input[1]).val(), '备注', '合计'];
            table.exportFile(head, sum_data, '{{$title}}.csv'); //默认导出 csv，也可以为：xls
        });
        // 增加
        $('.add').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            var html = '';
            html += '<tr>';
                html += '<td>'+ (index + 1) +'</td>';
                html += '<td>';
                    html += '<input autocomplete="off"  class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>';
                html += '<td>';
                    html += '<input autocomplete="off"  class="layui-input straight_alcohol" lay-verify="number" placeholder="请输入" required="" type="text" value="0"/>';
                html += '</td>';
                html += '<td>';
                    html += '<input autocomplete="off"  class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>';
                html += '</td>';
                html += '<td>';
                    html += '<input autocomplete="off" class="layui-input reduce_material_sum" lay-verify="number" name="reduce_material_sum" placeholder="请输入" ;required="" type="text" value="0"/>';
                html += '</td>';
                html += '<td>';
                    html += '<input autocomplete="off" class="layui-input purchase_sum"  name="purchase_sum" placeholder="请输入" required="" type="text" value=""/>';
                html += '</td>';
                html += '<td>';
                    html += '<input autocomplete="off" class="layui-input month_of_end_sum" lay-verify="number" placeholder="请输入" required="" type="text" value="0"/>';
                html += '</td>';
            html += '</tr>';


            $('.data-tbody').append(html);
            layer.msg(index);
        });
        // 减少
        $('.reduce').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            if (index <= 1) {
                layer.msg('保留'+index+'行');
                return false;
            }
            $('.data-tbody').children('tr')[index - 1].remove();
            return false;
        });
    });
</script>